<template>
  <div class="box">
    <div class="left-box">
      <div class="content bg-box" :class="{ expandcontent: !isleftboxShow }">
        <div class="nav-box">
          <div @click="switcVideo('realTime')" :class="{ navboxxz: statelive === 'realTime'}">实时视频</div>
          <div @click="switcVideo('history')" :class="{ navboxxz: statelive === 'history'}">历史录像</div>
        </div>
        <RealTimeTree @playVideo="playVideo"></RealTimeTree>
      </div>

      <div class="control" @click="isleftboxShow = !isleftboxShow">
        <img v-show="isleftboxShow" src="/tree/left-sq.png">
        <img v-show="!isleftboxShow" src="/tree/left-zk.png">
      </div>
    </div>

    <div style="width: 10px"></div>

    <div class="right-box">
      <div style="height: 100%" v-show="statelive === 'realTime1'">
        <LiveGbs ref="livgbs" ></LiveGbs>
      </div>




      <div style="height: 100%;display: flex" v-show="statelive !== 'realTime'" >



        <div style="border: 0.5px solid #e7e6e6; width: 80%">

          <div style="position: relative" :style="{ height: clientHeight - 260 + 'px' }"
               v-loading="loading" element-loading-text="加载中..." element-loading-background="#000">
            <LivePlayer live hideLiveText :videoUrl="videoUrl" :waterMark="osd"
                        @ended="onDeviceVideoEnd" @error="onVideoError" @timeupdate="onDeviceVideoTimeUpdate"
                        @media_info="onMediaInfo"
                        style="width: 100%; background: #d31717" aspect='fullscreen'></LivePlayer>
          </div>

          <div class="operateBox">
            <div>
              <!--          <el-button @click="PlaySlow()">-->
              <!--            <el-image class="image" src="/videox/rewind-back.png"></el-image>-->
              <!--          </el-button>-->

              <!--          <el-button @click="PauseResume()">-->
              <!--            <el-image class="image" v-if="PauseResumeSta" src="/videox/play.png"></el-image>-->
              <!--            <el-image class="image" v-else src="/videox/pause.png"></el-image>-->
              <!--          </el-button>-->

              <!--          <el-button @click="PlayFast()">-->
              <!--            <el-image class="image" src="/videox/rewind-forward.png"></el-image>-->
              <!--          </el-button>-->
            </div>
          </div>
        </div>

        <div class="main-right"  style="height: 100px ;width: 100px; float: right;">
          <div class="nav-box">
          </div>
        </div>

        <div>
          <TimeRule ref="timeRule" :videos="videos" :start="start" :end="end" :minutesPerUnit="minutesPerUnit"
                    @timeChange="onTimeChange" v-loading="loadingRecords"></TimeRule>
        </div>

      </div>


    </div>
  </div>
</template>

<script>
import useView from "@/hooks/useView";
import {defineComponent, reactive, ref, toRefs} from "vue";
import RealTimeTree from "./leftbox/realTimeTree.vue";
import LiveGbs from "./rightbox/livegbs.vue";
import LivePlayer from "@liveqing/liveplayer-v3";
import moment from "moment";
import TimeRule from '@/views/historyVideo/components/TimeRule.vue'


export default defineComponent({
  components: {
    RealTimeTree,
    LivePlayer,
    LiveGbs,
    TimeRule
  },
  setup() {
    const state = reactive({
      isleftboxShow: true,
      fullfcreen: true,
      statelive: "realTime",
      clientHeight: document.body.clientHeight,
      mediaInfo: null,
      videos: [],
      start: 0,
      end: 0,
      minutesPerUnit: 1,
      loadingRecords: false,


    });
    const flvurl = ref("http://192.168.0.3:28000/rtp/34020000001320000001_34020000001320000001.live.flv");
    return {...useView(state), ...toRefs(state), flvurl};
  },
  methods:{
    switcVideo(state){
      this.statelive = state;
    },
    playVideo(data) {
      if(data.type.includes("camera")){
        console.log(data.type,"-------")
        this.$refs.livgbs.playVideo(data);
      }
    },



    onDeviceVideoEnd() {
      this.mediaInfo = null;
    },
    onVideoError(e) {
      if (e == 'MediaError' && ((this.mediaInfo && String(this.mediaInfo.videoCodec).startsWith("hvc")) || this.type == "cloud" || this.protocol == "HLS")) {
        console.log("提示: 正在播放 H265 直出流, 确保浏览器版本较新, 并且开启硬件加速");
        return
      }
      if (!this.video) return;
      var endTime = moment(this.video.EndTime, "YYYY-MM-DDTHH:mm:ss");
      endTime.add(5, 'minutes');
      var n = endTime.diff(endTime.clone().startOf('day'), 'minutes');
      this.$refs['timeRule'].clickMinute(n);
    },

    onDeviceVideoTimeUpdate(t) {
      if (t < 1 || !this.video) return;
      var startTime = moment(this.video.StartTime, 'YYYY-MM-DDTHH:mm:ss');
      startTime.add(t, 'seconds');
      var n = startTime.diff(startTime.clone().startOf('day'), 'minutes');
      this.$refs['timeRule'].clickMinute(n, false);
      var endTime = moment(this.video.EndTime, "YYYY-MM-DDTHH:mm:ss");
      var d = endTime.diff(startTime, 'seconds');
      if (d - t < 3 && !this.switchTimer) { // switch to next video
        this.switchTimer = setTimeout(() => {
          endTime.add(5, 'minutes');
          var n = endTime.diff(endTime.clone().startOf('day'), 'minutes');
          this.$refs['timeRule'].clickMinute(n);
        }, 3000);
      }
    },

    onMediaInfo(mi) {
      this.mediaInfo = mi;
    },
    onTimeChange(video) {
      // if (this.type == 'device' && video != this.video) {
      this.video = video;
      if (video) {
        this.startPlayback();
      } else {
        this.stopPlayback();
      }
      // }
    },

  }
})
</script>

<style lang="scss">
.box {
  font-family: Source Han Sans CN;
  display: flex;
  padding: 40px 10px 20px 10px;
  position: relative;

  .bg-box {
    background-image: url(@/views/bigScreen/imgs/screen_bg_1.png);
    background-size: 100% 100%;
    border-radius: 6px;
  }

  .left-box {
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 999;

    .nav-box {
      display: flex;
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      align-items: center;
      justify-content: space-around;

      div{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 46px;
        cursor: pointer;
      }
    }
    .navboxxz {
      background-image: url("/videox/nav-xz.png");
      background-size: 100% 100%;
    }

    .expandcontent {
      height: 100%;
      width: 0;
      overflow: auto;
      transition: width ease-out 0.2s;
    }
  }

  .content {
    height: 100%;
    width: 300px;
    overflow: auto;
    transition: width ease-in 0.2s;
  }

  .control {
    height: 120px;
    width: 22px;
    cursor: pointer;
    text-align: center;

    img{
      width: 100%;
      height: 100%;
    }
  }



  .right-box {
    flex: 1;
  }
  .main-right {
    display: flex;
    align-items: center;
    margin-left: 10px;
    background-image: url(@/views/bigScreen/imgs/screen_bg_1.png)

  }

}
</style>
